<template>
  <div class="bcv-right">
		<div class="bcvr-title">
			<div class="bcvr-left">{{menuChildName}}</div>
			<div class="bcvr-right">首页>{{menuName}}</div>
		</div>
		<div class="bcvr-content">
			<ul class="news-ul">
				<router-link v-for="(item,index) in menuChildContent" :key="index" :to="newsPath+item.id">
					<li class="news-list">
						<div class="news-img box">
							<img :src="item.img_url" />
						</div>
						<div class="news-info">
							<p class="news-title">{{item.title}}</p>
							<p class="news-content" v-html="item.sub_title"></p>
							<p class="news-content">{{item.creatTime}}</p>
						</div>
					</li>
				</router-link>
			</ul>
			<el-pagination
		      @current-change="handleCurrentChange"
		      :page-size="pageSize"
		      :current-page="currentPage"
		      layout=" prev, pager, next, jumper"
		      :total="count">
    		</el-pagination>
		</div>
	</div>
</template>

<script>
	import 	News 		from 	'@/service/news-service.js';
	import 	Menu 		from 	"@/service/menu-service.js"
	import 	Mutil 		from 	"@/util/mm.js"
	const 	_mm 		= 		new Mutil();
	const 	_menu 		= 		new Menu();
	const 	_news 		=	  	new News();
	
	export default {
		name: 'NewsRight',
		props:['menuName','menuId'],
		data () {
		return {
			menuChildId 			: "",
			menuChildName			: "",
			menuChildContent		: {},
			childMenu				: {},
			newsPath				: '/newsinfo/',
			count 					: 0,
			currentPage				: 1,
			pageSize				: 6
		}
		},
		watch: {
			$route( to , from ){  
				if( this.$route.params.id==null ){
					this.menuChildName		= this.childMenu[0].name;
					this.menChildId			= this.childMenu[0].id;
				}else{
					for(var i = 0;i<this.childMenu.length;i++){
						if( this.childMenu[i].id == this.$route.params.id ){
							this.menuChildName		= this.childMenu[i].name;
							this.menChildId			= this.childMenu[i].id;
						}
					}
				}
				document.body.scrollTop = 0
				document.documentElement.scrollTop = 0
				this.findNewsList(this.menChildId,this.pageSize,0);
			}
		},
		created (){
			this.findMenuChild(this.menuId);
		},
	  	components:{
	  	},
	  	methods:{
	  		handleCurrentChange(val) {
		        document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
		        this.findNewsList(this.menChildId,this.pageSize,val-1);
	      	},
	  		
	  		// 这个是通过类型进行查找指定的数据
			findNewsList(typeId,pageSize,currentPage){
				_news.newsList({'type': typeId,'pageSize':pageSize,'currentPage':currentPage}).then((res)=>{
					for(var i = 0;i<res.data.length;i++){
						res.data[i].creatTime = _mm.timestampToTime(res.data[i].creatTime);
					}
					console.log(res.count)
					this.count 				= res.count;
					this.menuChildContent 	= res.data;
					this.currentPage = currentPage+1;
				},(errMsg)=>{
					console.log(errMsg);
				})
			},
			findMenuChild(id){
				_menu.menuList({'pId':id}).then((res)=>{
					this.childMenu 				= res.data;
					console.log(res.data)
					if( this.$route.params.id==null ){
						this.menuChildName		= this.childMenu[0].name;
						this.menChildId				= this.childMenu[0].id;
					}else{
						for(var i = 0;i<this.childMenu.length;i++){
							if( this.childMenu[i].id == this.$route.params.id ){
								this.menuChildName		= this.childMenu[i].name;
								this.menChildId			= this.childMenu[i].id;
							}
						}
					}
					this.findNewsList(this.menChildId,this.pageSize,0);
				},(errMsg)=>{
					console.log(errMsg);
				})
			}
	  	}
	}
</script>

<style scoped lang="less">
	.bcv-right{
		width: 74%;
		float: left;
		padding: 14px 35px 66px 35px;
		border-left: 1px solid #e6e6e6;
		.bcvr-title{
			width:100%;
			display:table;
			border-bottom: 1px solid #e2e2e2;
			.bcvr-left{
				float: left;
				padding-bottom: 14px;
				border-bottom: 3px solid #C62E25;
			}
			.bcvr-right{
				float: right;
				color: #999;
				fint-size:14px;
			}
		}
		.bcvr-content{
			color: #666;
			.news-ul{
				.news-list{
					height: 120px;
					padding-top: 49px;
					.news-img{
						float: left;
						width: 160px;
						height: 120px;
						padding-right:29px;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.news-info{
						.news-title{
							font-size: 20px;
							color: #333;
							font-weight: bold;
						}
						.news-content{
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							font-size: 16px;
							color: #666;
							margin-top: 10px;
						  height: 50px;
						  line-height: 25px;
					    -webkit-box-orient: vertical;
						}
					}
				}
			}
			.el-pagination{
				padding-top: 53px;
				text-align: center;
			}
			.el-pagination.is-background .el-pager li:not(.disabled).active{
				background: #C62E25 !important;
			}
		}
	}
</style>